/**
 * @desc: 虚拟表格实现
 * @author: elvis
 */

import React from 'react';
import { useTablePipeline, features, BaseTable } from 'ali-react-table'
import { Checkbox, Empty, Radio } from 'antd';
//表格自定义css变量，可以直接更改

// /** 表格的字体颜色 */
// '--color': string
// /** 表格背景颜色 */
// '--bgcolor': string
// /** 表头的字体颜色 */
// '--header-color': string
// /** 表头的背景颜色 */
// '--header-bgcolor': string
// /** 数据单元格 和 表头单元格 的边框颜色 */
// '--border-color': string

// /** 表格行高，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
// '--row-height': string
// /** 表格行 鼠标悬停时的背景色 */
// '--row-hover-color': string
// /** 表格行高，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
// '--header-row-height': string

// /** 数据单元格边框，默认为 1px solid var(--border-color) */
// '--cell-border': string
// /** 数据单元格上下边框，默认为 var(--cell-border) */
// '--cell-border-horizontal': string
// /** 数据单元格左右边框，默认为 var(--cell-border) */
// '--cell-border-vertical': string

// /** 表头单元格边框，默认为 1px solid var(--border-color) */
// '--header-cell-border': string
// /** 表头单元格上下边框，默认为 var(--header-cell-border) */
// '--header-cell-border-horizontal': string
// /** 表头单元格左右边框，默认为 var(--header-cell-border) */
// '--header-cell-border-vertical': string

// /** 数据单元格边框 */
// '--cell-border-top': string
// '--cell-border-bottom': string
// '--cell-border-left': string
// '--cell-border-right': string

// /** 表头单元格边框 */
// '--header-cell-border-top': string
// '--header-cell-border-bottom': string
// '--header-cell-border-left': string
// '--header-cell-border-right': string
const defaultStyle = {
	overflow: 'auto',
	padding: 0,
}

//虚拟表格进阶用法-行单选配置文件
const defaultSingleOption = {
	value: [],
	clickArea: 'cell',
	radioPlacement: 'start',
	highlightRowWhenSelected: true,
	radioColumn: { lock: true, width: '40px' },
	//onChange: () => {},
}

//虚拟表格进阶用法-排序配置文件
const defaultSortOption = {
	sorts: [],
	mode: 'single',
	clickArea: 'icon',
	keepDataSource: true,
	highlightColumnWhenActive: true,
	//onChangeSorts: () => {},
}

//虚拟表格进阶用法-排序配置文件
const defaultColumnResizeOption = {
	fallbackSize: 120,
	handleBackground: 'none',
	handleHoverBackground: 'red',
	handleActiveBackground: 'red',
}


function ProTable({ data, columns, sortOption, checkOption, radioOption, columnResizeOption, style, rowKey = 'id', className="views-virtual-table", tableKey }) {
	
	//虚拟表格进阶用法-行多选配置文件
	const defaultMultiOption = {
		value: [],
		clickArea: 'cell',
		checkboxPlacement: 'start',
		highlightRowWhenSelected: true,
		checkboxColumn: { lock: true, width: 60 },
		onChange: (selectId, currentId) => {
			checkOption.selectChange(selectId, currentId)
		},
	}

	const pipeline = useTablePipeline({ components: { Checkbox, Radio } })
		.input({ dataSource: data, columns })
		.primaryKey(rowKey);
	//开启排序
	if (sortOption) {
		pipeline.use(features.sort({ ...defaultSortOption, ...sortOption }));
	}

	//开启多选
	if (checkOption) {
		pipeline.use(features.multiSelect({ ...defaultMultiOption, ...checkOption }));
	}

	//开启单选
	if (radioOption) {
		pipeline.use(features.singleSelect({ ...defaultSingleOption, ...radioOption }));
	}

	//开启列宽拖动
	if (columnResizeOption) {
		pipeline.use(features.columnResize({ ...defaultColumnResizeOption, ...columnResizeOption }));
	}
	return <BaseTable {...pipeline.getProps()} className={className} components={{ EmptyContent: Empty }} style={{ ...defaultStyle, ...style }} key={tableKey} />
}

export default ProTable;